<template>s
    <a-breadcrumb class="flex-no-shrink">
        <a-breadcrumb-item v-for="(item, index) in current" :key="index">
            <a v-if="current.length > index + 1" :href="item.routeName">{{ item.title }}</a>
            <template v-else> {{ item.title }} </template>
        </a-breadcrumb-item>
    </a-breadcrumb>
    <router-view></router-view>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
    setup() {
        const route = useRoute()
        let current: ComputedRef<any> = computed(() => {
            let result = []
            for (let i = 1; i < route.matched.length; i++) {
                result.push({
                    title: route.matched[i].meta.title,
                    routeName: route.matched[i].path
                })
            }
            return result
        })
        return {
            current
        }
    }
})
</script>
<style lang="less" scoped>
.flex-no-shrink {
    line-height: 50px;
    height: 50px;
}
</style>
